<template>
  <section v-if="babyInfo" class="evaluation-result">
    <ElCard class="baby-info">
      <div class="baby one">
        <div class="child">姓名：{{ babyInfo.user.child_name }}</div>
        <div class="child">年龄：{{ babyInfo.user.age }}</div>
        <div class="child">性别：{{ babyInfo.user.sex }}</div>
        <div class="child">电话： {{ babyInfo.user.parent_tel }}</div>
      </div>
    </ElCard>
    <ElCard class="no-padding">
      <div class="intro">
        <i class="el-icon-circle-check" style="margin-right: 10px;"></i
        >体质体格结果
        <span class="tips"
          >本站所有建议均供用户参考，不可替代专业医师诊断、不可替代医师处方。本站不承担由此导致的相关责任。</span
        >
      </div>
      <div class="baby echarts">
        <div class="child">
          <div
            v-show="physicalImg && babyInfo.system"
            class="physicalImg content"
          >
            <div ref="physicalImg" class="echarts"></div>
            <template v-if="babyInfo.system.result">
              <p class="title two-line">
                初步测试孩子的体质为：{{ babyInfo.system.result }}
              </p>
              <p>主要特征：{{ babyInfo.system.detail }}</p>
              <p>调养法则：{{ babyInfo.system.rule }}</p>
              <p>潜在问题：</p>
              <p v-for="(item, index) in babyInfo.system.question" :key="index">
                {{ index + 1 }}、{{ item }}
              </p>
            </template>
          </div>
          <NoContent v-show="!(physicalImg && babyInfo.system)">
            <ElButton type="primary" plain round @click="gotoEvaluation"
              >暂无信息，去体质测试</ElButton
            >
          </NoContent>
        </div>
        <div
          v-show="
            heightImg &&
              weightImg &&
              babyInfo.physique.height &&
              babyInfo.physique.weight
          "
          class="child"
        >
          <div class="heightImg content">
            <div ref="heightImg" class="echarts"></div>
          </div>
          <div v-if="babyInfo.physique.height.result" class="content">
            <p class="title">
              身高分析：宝宝身高{{ babyInfo.physique.height.result.num }}
            </p>
            <p class="title next">
              标准范围{{ babyInfo.physique.height.result.range }}
            </p>
            <p>评测结果：{{ babyInfo.physique.height.say }}</p>
            <p>调养法则：{{ babyInfo.physique.height.rule }}</p>
            <p>潜在问题：</p>
            <p
              v-for="(item, index) in babyInfo.physique.height.question"
              :key="index"
            >
              {{ index + 1 }}、{{ item }}
            </p>
          </div>
        </div>
        <div
          v-show="
            heightImg &&
              weightImg &&
              babyInfo.physique.height &&
              babyInfo.physique.weight
          "
          class="child"
        >
          <div class="weightImg content">
            <div ref="weightImg" class="echarts"></div>
          </div>
          <div v-if="babyInfo.physique.weight.result" class="content">
            <p class="title">
              体重分析：宝宝体重{{ babyInfo.physique.weight.result.num }}
            </p>
            <p class="title next">
              标准范围{{ babyInfo.physique.weight.result.range }}
            </p>
            <p>评测结果：{{ babyInfo.physique.weight.say }}</p>
            <p>调养法则：{{ babyInfo.physique.weight.rule }}</p>
            <p>潜在问题：</p>
            <p
              v-for="(item, index) in babyInfo.physique.weight.question"
              :key="index"
            >
              {{ index + 1 }}、{{ item }}
            </p>
          </div>
        </div>
        <div
          v-show="
            !(
              heightImg &&
              weightImg &&
              babyInfo.physique.height &&
              babyInfo.physique.weight
            )
          "
          class="child child2"
        >
          <NoContent>
            <ElButton type="primary" plain round @click="gotoEvaluation"
              >暂无信息，去体格测试</ElButton
            >
          </NoContent>
        </div>
      </div>
    </ElCard>
    <!-- 解决方案 -->
    <Solution
      :hand-list="handList"
      :hand-list-simple="handListSimple"
      :say-list="sayList"
      :food-list="foodList"
      :progress="progress"
    ></Solution>
    <!-- 门店推荐 -->
    <RecomendDoctor
      :id="id"
      :recommend-product-id="recommendProductId"
      :doctors="doctors"
      :type="'evaluation'"
      :product.sync="product"
      @next="$emit('next', {}, 3)"
    ></RecomendDoctor>
  </section>
  <NoContent v-else>
    <p class="info-text">你还没有参加评测！</p>
  </NoContent>
</template>

<script>
import $ from 'jquery';
import echarts from 'echarts';
import {http, catchAppError} from '@/util';
import url from '@/config';
import {menusNavigation} from '@/store';
import Solution from '@/components/advisory/advisoryDetail/solution';
import RecomendDoctor from '@/components/advisory/advisoryDetail/recomendDoctor';
import NoContent from '@/components/evaluation/NoContent.vue';

export default {
  name: 'EvaluationResult',
  components: {NoContent, Solution, RecomendDoctor},
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chartWidth: 0,
      babyInfo: null,
      physicalImg: null,
      heightImg: null,
      weightImg: null,
      handList: null,
      handListSimple: null,
      sayList: null,
      foodList: null,
      progress: null,
      product: null,
      recommendProductId: [],
      doctors: null
    };
  },
  watch: {
    id() {
      if (!+this.id) return;
      http
        .post(url.getDoctors)
        .then(res => {
          this.doctors = res;
        })
        .catch(catchAppError);
      http
        .post(url.testResult, {u_id: this.id})
        .then(res => {
          this.babyInfo = res;
          if (!this.babyInfo) return;
          this.handList = res.solution.hand;
          this.handListSimple = res.solution.hand_simple;
          this.sayList = res.solution.solution.sayList;
          this.foodList = res.solution.solution.foodList;
          res.solution.solution.book = res.solution.solution.book || [];
          this.progress = res.solution.solution;
          this.recommendProductId = res.product.commodity.map(it => it.id);
          res.product.more = res.product.commodity.concat(res.product.more);
          res.product.more.forEach(it => {
            it.number = 1;
            it.now_price = it.price;
            it.all_price = it.price;
          });
          this.product = res.product.more;
          this.chartWidth = $('.Evaluation').width() / 3 - 50;
          this.getCharts();
        })
        .catch(catchAppError);
    }
  },
  methods: {
    getCharts() {
      http
        .post(url.physicalImg, {u_id: this.id})
        .then(res => {
          this.physicalImg = res;
          if (!this.physicalImg) return;
          this.$refs.physicalImg.style.width = `${this.chartWidth}px`;
          const myChart = echarts.init(this.$refs.physicalImg);
          const option = {
            tooltip: {},
            grid: {
              top: 10,
              bottom: 0,
              left: 0,
              right: 0,
              containLabel: true,
              show: true
            },
            xAxis: {
              data: this.physicalImg.name
            },
            yAxis: {},
            series: [
              {
                name: '体质',
                type: 'bar',
                data: this.physicalImg.grade
              }
            ]
          };
          myChart.setOption(option);
        })
        .catch(catchAppError);
      http
        .post(url.heightImg, {u_id: this.id})
        .then(res => {
          this.heightImg = res;
          if (!this.heightImg) return;
          this.$refs.heightImg.style.width = `${this.chartWidth}px`;
          const myChart = echarts.init(this.$refs.heightImg);
          const option = {
            tooltip: {
              trigger: 'axis'
            },
            grid: {
              top: 30,
              bottom: 0,
              left: 10,
              right: 20,
              containLabel: true,
              show: true
            },
            legend: {
              top: 0
            },
            xAxis: {
              scale: true
            },
            yAxis: {},
            series: [
              {
                name: '标准线',
                symbolSize: 0,
                smooth: true,
                type: 'line',
                data: this.heightImg.data[0].data
              },
              {
                name: '宝宝身高',
                symbolSize: 10,
                itemStyle: {
                  normal: {
                    color: '#000',
                    lineStyle: {
                      color: '#000'
                    }
                  }
                },
                type: 'scatter',
                data: this.heightImg.data[1].data
              }
            ]
          };
          myChart.setOption(option);
        })
        .catch(catchAppError);
      http
        .post(url.weightImg, {u_id: this.id})
        .then(res => {
          this.weightImg = res;
          if (!this.weightImg) return;
          this.$refs.weightImg.style.width = `${this.chartWidth}px`;
          const myChart = echarts.init(this.$refs.weightImg);
          const option = {
            tooltip: {
              trigger: 'axis'
            },
            grid: {
              top: 30,
              bottom: 0,
              left: 10,
              right: 20,
              containLabel: true,
              show: true
            },
            legend: {
              top: 0
            },
            xAxis: {
              scale: true
            },
            yAxis: {},
            series: [
              {
                name: '标准线',
                symbolSize: 0,
                smooth: true,
                type: 'line',
                data: this.weightImg.data[0].data
              },
              {
                name: '宝宝体重',
                symbolSize: 10,
                itemStyle: {
                  normal: {
                    color: '#000',
                    lineStyle: {
                      color: '#000'
                    }
                  }
                },
                type: 'scatter',
                data: this.weightImg.data[1].data
              }
            ]
          };
          myChart.setOption(option);
        })
        .catch(catchAppError);
    },
    gotoEvaluation() {
      this.$emit('back');
    }
  }
};
</script>

<style lang="scss">
.evaluation-result {
  font-size: 16px;
  .baby.one {
    font-size: 16px;
  }
  .baby-info {
    position: relative;
  }
  .btn-search-record {
    position: absolute;
    right: 40px;
    bottom: 20px;
  }
  .intro {
    position: relative;
    font-size: 16px;
    padding: 10px 25px;
    color: #4b90ff;
    background-color: #fafafa;
    .tips {
      position: absolute;
      width: 100%;
      text-align: center;
      color: #ff7022;
      left: 0;
    }
  }
  .no-padding {
    .el-card__body {
      padding: 0;
    }
  }
  .baby {
    display: flex;
    flex-wrap: wrap;
    &.echarts {
      .child {
        padding-bottom: 15px;
        .title {
          color: #4b90ff;
          font-size: 16px;
          &.two-line {
            height: 68px;
          }
          &.next {
            padding-left: 60px;
          }
        }
        p {
          line-height: 2.8333;
          margin: 0;
          font-size: 16px;
        }
      }
    }
    &.one {
      margin-top: -40px;
      .child {
        width: 25%;
        margin-top: 40px;
        border-left: none;
      }
    }
    .child {
      box-sizing: border-box;
      width: 33.333%;
      border-left: 1px solid #ccc;
      &.child2 {
        width: 66.666%;
      }
      .content {
        padding-left: 25px;
        padding-right: 25px;
        .echarts {
          width: 300px;
          height: 300px;
          margin-left: auto;
          margin-right: auto;
        }
      }
      &:first-child {
        border-left: none;
      }
    }
  }
}
</style>
